<template>
    <div class="SMS-box">
        <el-input placeholder="手机号/账号" v-model="phone" class="phone-item"></el-input>
        <label class="warning_txt" v-if="waringShow">{{warning_txt}}</label>
        <div class="captcha-box">
            <el-input placeholder="验证码" v-model="code"></el-input>
            <div class="captcha-btn" @click="sendCode">发送验证码</div>
        </div>
        <div class="radio-box">
            <input type="checkbox" v-model="agree">我同意用户条款和隐私政策
        </div>
        <label class="warning_txt" v-if="waringShow2">{{warning_txt}}</label>
        <button @click="loginAccount">登录</button>
    </div>
</template>

<script>
import { getLoginCode, loginOrReg } from '@/utils/api/login';

export default {
    data(){
        return {
            phone:null,
            code:null,
            warning_txt:null,
            waringShow:false,
            waringShow2:false,
            agree:false
        }
    },
    methods:{
        sendCode(){
            const that=this
            if(this.phone.length===11){
                getLoginCode(this.phone).then(data=>{
                    that.code=data.code
                })
            }else if(this.phone.length!==11){
                that.warning_txt="手机号码为11位,现在超出或者不足"
                that.waringShow=true
                const time=setTimeout(()=>{
                    that.waringShow=false
                    that.warning_txt=null
                    that.phone=null
                    that.code=null
                    clearTimeout(time)
                },3000)
            }
        },
        loginAccount(){
            const that=this
            if(this.agree===false){
                this.warning_txt="请勾选用户条款和隐私政策"
                that.waringShow2=true
                const time=setTimeout(()=>{
                    that.waringShow2=false
                    that.warning_txt=null
                    clearTimeout(time)
                },3000)
            }else{
                loginOrReg({phone:this.phone,code:this.code}).then(data=>{
                    localStorage.setItem('user',JSON.stringify(data))
                    that.$store.state.UAPdialogShow=false
                    that.$store.state.islogin=true
                })
            }
        }
    }
}
</script>

<style>
.SMS-box{
    width: 90%;
    margin: 0 auto;
}
.phone-item{
    margin-top: 20px;
}
.warning_txt{
    font-size: 10px;
    color: red;
    padding-left: 10px;
}
.captcha-box{
    display: flex;
    margin-top: 20px;
}
.captcha-btn{
    border: 1px solid #bbb;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20rpx;
    width: 25%;
}
.radio-box{
    margin-top: 20px;
    display: flex;
    align-items: center;
    font-size: 10px;
}
.SMS-box>button{
    width: 100%;
    background-color: black;
    color: #fff;
    padding: 5px 0;
    font-size: 16px;
    margin: 15px 0;
}
</style>